/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, SuffixInput, TextArea, LineColumn, Input,CCell, Table, TableBody, TableRow, TableHead, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, tableSetInp} from "../../../common/tool";
import {RepLink} from "../../common/base";

const 运行行程its=['(1)小车1','(2)小车2','(3)大车'];
const 垂直度its=['支腿1','支腿2'];
const tailZj=<Text css={{"@media print": {fontSize: '0.75rem'}
    }}>注：1、显示值和测量值不大于5%时，检验结果符合要求。
    <Text css={{display: 'flex', marginLeft:'2rem', "@media print": {fontSize: '0.75rem', marginLeft:'1.5rem'}
    }}>2、未检查或无需检验的，仅填检验结果栏。<br/>
       3、对于多起升机构或多小车运行机构的起重机，仅记录其中2个主起升机构的起升高度和2个主小车运行机构的运行行程。对于其余起升机构和小车运行机构的测量值，记录在备注栏。
    </Text>
</Text>;
interface Props  extends InternalItemProps{
    label?: string;
}
export const itemA安监控管 = ['起高表','起高表r','行程表','行程表r','幅度表','幅度表r','水平表','水平表r', '监风速o','监控备注'];
/*'监风速', 结论非法[object Object] 同名报错：该改存储名 监风速o ！
* */
export const MonitoringSys =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA安监控管,);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}</Text>
                <Text variant="h5" css={{fontSize:'1.3rem'}}>项目1: C4.2.2.5.1.1 起升高度（m）{'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {(new Array(2)).fill(null).map((group, g: number) => {
                            return <React.Fragment key={g}>
                            {['1次','2次','3次'].map((group, i: number) => {
                                let d=g*3+i;
                                return <React.Fragment key={d}>
                                    <Text variant="h6">主起升{g+1} - {group}:</Text>
                                    显示屏数值H1
                                    <Input value={inp?.起高表?.[d]?.H1 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'H1',e.currentTarget.value||undefined)}/>
                                    (m)，H2
                                    <Input value={inp?.起高表?.[d]?.H2 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'H2',e.currentTarget.value||undefined)}/>
                                    (m)，测量值h1
                                    <Input value={inp?.起高表?.[d]?.h1 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'h1',e.currentTarget.value||undefined)}/>
                                    (m)，h2
                                    <Input value={inp?.起高表?.[d]?.h2 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'h2',e.currentTarget.value||undefined)}/>
                                    (m)，计算值H
                                    <Input value={inp?.起高表?.[d]?.H ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'H',e.currentTarget.value||undefined)}/>
                                    (m)，h
                                    <Input value={inp?.起高表?.[d]?.h ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                           onChange={e =>tableSetInp('起高表',d, inp,setInp,'h',e.currentTarget.value||undefined)}/>
                                    (m)。
                                </React.Fragment>;
                            })}
                            </React.Fragment>;
                        })}

                        <br/><Text variant="h5" css={{display:'inline-flex'}}>起升高度-检验结果：</Text>
                        <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                            <SelectHookfork value={(inp?.起高表r) || ''}
                                            onChange={e => setInp({...inp, 起高表r: e.currentTarget.value || undefined})}/>
                        </div>
                    </div>
                </div>
                <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>项目2: C4.2.2.5.1.2 运行行程（m）{'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {运行行程its.map((group, i: number) => {
                            return <React.Fragment key={i}>
                                <Text variant="h6">{group}:</Text>
                                显示屏数值S1
                                <Input value={inp?.行程表?.[i]?.S1 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('行程表',i, inp,setInp,'S1',e.currentTarget.value||undefined)}/>
                                (m)，S2
                                <Input value={inp?.行程表?.[i]?.S2 ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('行程表',i, inp,setInp,'S2',e.currentTarget.value||undefined)}/>
                                (m)，测量值s
                                <Input value={inp?.行程表?.[i]?.s ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('行程表',i, inp,setInp,'s',e.currentTarget.value||undefined)}/>
                                (m)，计算值S
                                <Input value={inp?.行程表?.[i]?.S ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('行程表',i, inp,setInp,'S',e.currentTarget.value||undefined)}/>
                                (m)。
                            </React.Fragment>;
                        })}
                        <br/><Text variant="h5" css={{display:'inline-flex'}}>运行行程-检验结果：</Text>
                        <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                            <SelectHookfork value={(inp?.行程表r) || ''}
                                            onChange={e => setInp({...inp, 行程表r: e.currentTarget.value || undefined})}/>
                        </div>
                    </div>
                </div>
                <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>项目3: C4.2.2.5.1.5 水平度 (°), 整体{'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {(new Array(1)).fill(null).map((group, i: number) => {
                            return <React.Fragment key={i}>
                                显示屏数值
                                <Input value={inp?.水平表?.[i]?.d ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('水平表',i, inp,setInp,'d',e.currentTarget.value||undefined)}/>
                                (°)，测量值
                                <Input value={inp?.水平表?.[i]?.m ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('水平表',i, inp,setInp,'m',e.currentTarget.value||undefined)}/>
                                (°)。
                            </React.Fragment>;
                        })}
                        <br/><Text variant="h5" css={{display:'inline-flex'}}>4.2.2.5.1.5水平度-检验结果：</Text>
                        <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                            <SelectHookfork value={(inp?.水平表r) || ''}
                                            onChange={e => setInp({...inp, 水平表r: e.currentTarget.value || undefined})}/>
                        </div>
                    </div>
                </div>
                <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>项目4: C4.9.7.1 风速（m/s）, 1次 {'>>'}</Text>
                <LineColumn column={6}>
                    <InputLine label={`显示屏数值：`}>
                        <SuffixInput  value={inp?.监风速o?.d ||''}
                                      onChange={e=>objNestSet('监风速o','d',e.currentTarget.value||undefined, inp, setInp)}>m/s</SuffixInput>
                    </InputLine>
                    <InputLine label={`测量值：`}>
                        <SuffixInput  value={inp?.监风速o?.m ||''}
                                      onChange={e=>objNestSet('监风速o','m',e.currentTarget.value||undefined, inp, setInp)}>m/s</SuffixInput>
                    </InputLine>
                    <InputLine label='C4.9.7.1 风速-检验结果'>
                        <SelectHookfork value={ inp?.监风速o?.r ||''}
                                        onChange={e =>objNestSet('监风速o','r',e.currentTarget.value||undefined, inp, setInp) }/>
                    </InputLine>
                </LineColumn>
                <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>项目5: C4.9.7.2垂直度（°) {'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {垂直度its.map((group, i: number) => {
                            return <React.Fragment key={i}>
                                <Text variant="h6">垂直度(°) {group}:</Text>
                                显示屏数值
                                <Input value={inp?.幅度表?.[i]?.d ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('幅度表',i, inp,setInp,'d',e.currentTarget.value||undefined)}/>
                                (°)，测量值
                                <Input value={inp?.幅度表?.[i]?.m ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                                       onChange={e =>tableSetInp('幅度表',i, inp,setInp,'m',e.currentTarget.value||undefined)}/>
                                (°)
                            </React.Fragment>;
                        })}
                        <br/><Text variant="h5" css={{display:'inline-flex'}}>幅度-检验结果：</Text>
                        <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                            <SelectHookfork value={(inp?.幅度表r) || ''}
                                            onChange={e => setInp({...inp, 幅度表r: e.currentTarget.value || undefined})}/>
                        </div>
                    </div>
                </div>
                备注：
                <TextArea  value={inp?.监控备注 ||''} rows={3}
                           onChange={e => setInp({ ...inp, 监控备注: e.currentTarget.value||undefined}) } />
                { children ? children : tailZj }
            </InspectRecordLayout>
        );
} );

export const MonitoringSysVw= ({children, orc, rep,label } : { orc: any, rep: any,label:any, children?: any}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '9rem', pageBreakInside: 'avoid'}}}>
            {typeof label === 'object' ? <>{label}</>
                :
                <Text variant="h4" css={{marginTop: '1rem',
                }}>{label}</Text>
            }
        </div>
        <Table id={'Monitoring'} fixed={["3.5%", "%", "8%", "8%", "10%", "10%", "10%", "10%", "8%", "8%", "6.5%"]}
               css={{borderCollapse: 'collapse',"@media print": {marginTop: '-9rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell>序号</CCell>
                    <CCell>项目编号</CCell>
                    <CCell colSpan={2}>次数(类别)</CCell>
                    <CCell colSpan={2}>显示屏数值</CCell>
                    <CCell colSpan={2}>测量值</CCell>
                    <CCell colSpan={2}>计算值</CCell>
                    <CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'Monitoring'}>
                    <TableRow>
                        <CCell rowSpan={7}>1</CCell>
                        <CCell rowSpan={7}>C4.2.2.5.1.1 起升高度(m)</CCell>
                        <CCell colSpan={2}>/</CCell>
                        <CCell>H1</CCell>
                        <CCell>H2</CCell>
                        <CCell>h1</CCell>
                        <CCell>h2</CCell>
                        <CCell>H</CCell>
                        <CCell>h</CCell>
                        <CCell rowSpan={7}>{orc.起高表r}</CCell>
                    </TableRow>
                    {(new Array(3)).fill(null).map((_, r: number) => {
                        const o = orc.起高表?.[r];
                        return <TableRow key={r}>
                            {0===r && <CCell rowSpan={3}>主起升1</CCell>}
                            <CCell>{r + 1}次</CCell>
                            <CCell>{o?.H1}</CCell>
                            <CCell>{o?.H2}</CCell>
                            <CCell>{o?.h1}</CCell>
                            <CCell>{o?.h2}</CCell>
                            <CCell>{o?.H}</CCell>
                            <CCell>{o?.h}</CCell>
                        </TableRow>;
                    })}
                    {(new Array(3)).fill(null).map((_, r: number) => {
                        const o = orc.起高表?.[r+3];
                        return <TableRow key={r+3}>
                            {0===r && <CCell rowSpan={3}>主起升2</CCell>}
                            <CCell>{r + 1}次</CCell>
                            <CCell>{o?.H1}</CCell>
                            <CCell>{o?.H2}</CCell>
                            <CCell>{o?.h1}</CCell>
                            <CCell>{o?.h2}</CCell>
                            <CCell>{o?.H}</CCell>
                            <CCell>{o?.h}</CCell>
                        </TableRow>;
                    })}
                    <TableRow>
                        <CCell rowSpan={4}>2</CCell>
                        <CCell rowSpan={4}>C4.2.2.5.1.2 运行行程(m)</CCell>
                        <CCell colSpan={2}>/</CCell>
                        <CCell>S1</CCell>
                        <CCell>S2</CCell>
                        <CCell colSpan={2}>s</CCell>
                        <CCell>S</CCell>
                        <CCell>/</CCell>
                        <CCell rowSpan={4}>{orc.行程表r}</CCell>
                    </TableRow>
                    {运行行程its.map((group, r: number) => {
                        const o = orc.行程表?.[r];
                        return <TableRow key={r}>
                            <CCell colSpan={2}>{group}</CCell>
                            <CCell>{o?.S1}</CCell>
                            <CCell>{o?.S2}</CCell>
                            <CCell colSpan={2}>{o?.s}</CCell>
                            <CCell>{o?.S}</CCell>
                            <CCell>/</CCell>
                        </TableRow>;
                    })}
                    <TableRow>
                        <CCell>3</CCell>
                        <CCell>C4.2.2.5.1.5 水平度(°)</CCell>
                        <CCell colSpan={2}>整体</CCell>
                        <CCell colSpan={2}>{orc.水平表?.[0]?.d}</CCell>
                        <CCell colSpan={2}>{orc.水平表?.[0]?.m}</CCell>
                        <CCell colSpan={2}>/</CCell>
                        <CCell>{orc.水平表r}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>4</CCell>
                        <CCell>C4.9.7.1风速（m/s）</CCell>
                        <CCell colSpan={2}>1次</CCell>
                        <CCell colSpan={2}>{orc.监风速o?.d}</CCell>
                        <CCell colSpan={2}>{orc.监风速o?.m}</CCell>
                        <CCell colSpan={2}>/</CCell>
                        <CCell>{orc.监风速o?.r}</CCell>
                    </TableRow>
                    {垂直度its.map((group, r: number) => {
                        const o = orc.幅度表?.[r];
                        return <TableRow key={r}>
                            {0===r && <>
                                <CCell rowSpan={2}>5</CCell>
                                <CCell rowSpan={2}>C4.9.7.2垂直度(°)</CCell>
                            </>}
                            <CCell colSpan={2}>{group}</CCell>
                            <CCell colSpan={2}>{o?.d}</CCell>
                            <CCell colSpan={2}>{o?.m}</CCell>
                            <CCell colSpan={2}>/</CCell>
                            {0===r && <CCell rowSpan={2}>{orc.幅度表r}</CCell>}
                        </TableRow>;
                    })}
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell colSpan={10}>
                            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                {orc.监控备注 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        { children ? children : tailZj }
    </>;
};
